<template>
        <div class="msg-box">
                <div class="msg-logo" :style='item.type == 2?boxBg:""'>
                    <icon class="icon" name="system_msg_logo" v-if='item.type == 1'></icon>
                    <img :src='item.orderItemPicUrl' v-else/>
                </div>
                <div class="msg-content-box">
                    <div class="msg-content">
                        <div class="msg-title-box">
                            <div class="msg-title">{{itemData.title}}</div>
                            <div class="msg-time">{{itemData.send_time}}</div>
                        </div>
                        <div class="content">{{
                                itemData.type !=1 ? itemData.content:
                                itemData.contentDesc?itemData.contentDesc:'您有一条系统消息，点击查看详情'
                        }}</div>
                    </div>
                    
                </div>
            </div>
</template>

<script>
    import {
        NavBar
    } from 'vant'
    import Arrow from '@/components/vue-scroller/components/Arrow.vue'
    import storeNavBar from '@/components/store-nav-bar'
    import storeScroller from '@/components/store-scroller'
    import { isIOS } from 'mobile-device-detect'

    export default {
        props: ['item'],
        data() {
            return {
                itemData:this.item,
                boxBg:{background:'transparent'}
            }
        },
        created() {
          
        },
        mounted() {
        // console.log('itemData',this.itemData)
        },
        methods: {
          
        }
    }
</script>

<style lang="scss">
    .msg-box{
        height: 70px;background: #fff;display: flex;padding: 12px 15px;padding-bottom: 0;
        .msg-logo{
            height: 45px;width: 45px;border-radius: 50%;background:#1088E5;flex-shrink: 0;font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 50%;
            }
        }
        .msg-content-box{
            border-bottom: solid 1px $line-clr;height: 100%;width: 284px;margin-left:15px;
            .msg-title-box{
                display: flex;
                justify-content: space-between;
                .msg-title{
                    color: $title-clr;
                    font-size:$font-size-normal;
                }
                .msg-time{
                    font-size: $font-size-small;
                    color: $tips-clr;
                }
            }
            .content{
                color: $text-clr;
                font-size:$font-size-small;
                text-overflow: ellipsis; 
                overflow: hidden; 
                white-space: nowrap; 
                margin-top:12px;
            }
        }
    }
</style>